<template>
	<!-- 遮罩层 -->
	<view class="dialog" v-if="isMask">
		<!-- 对话框 -->
		<view class="dialog-box flex-column">
			<view class="dialog-box__title flex">
				<!-- 内容展示 -->
				{{props.title}}
			</view>
			
			<view class="dialog-box__btn flex">
				<button class="dialog-box__btn-cancel" @click="hideDialog">取消</button>
				<button class="dialog-box__btn-confirm" @click="handleConfirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, defineExpose, defineProps } from 'vue';

// 组件是否显示
const isMask = ref(false);

// 接收父组件传递的确认回调
const props = defineProps({
  onConfirm: Function, // 让父组件传递一个方法
  title:String,	// 让父组件传入内容
});

// 显示弹窗
const showDialog = () => {
  isMask.value = true;
};

// 隐藏弹窗
const hideDialog = () => {
  isMask.value = false;
};

// 点击确认按钮
const handleConfirm = () => {
  if (props.onConfirm) {
    props.onConfirm(); // 调用父组件的函数
  }
  hideDialog(); // 关闭弹窗
};

// 让父组件可以调用 showDialog 和 hideDialog
defineExpose({
  showDialog,
  hideDialog,
});
</script>

<style lang="scss" scoped>
.dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5); // 半透明背景
	display: flex;
	align-items: center;
	justify-content: center;
	
	&-box {
		width: 500rpx;
		// height: 200rpx;
		background-color: #fff;
		justify-content: space-between;
		border-radius: 20rpx;

		&__title {
			height: 100rpx;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333333;
		}
		
		&__btn {
			width: 100%;
			height: 100rpx;
			display: flex;
			
			&-cancel {
				font-size: 28rpx;
				flex: 1;
				color: #cc0018;
				border-top: 2rpx solid #797979;
				border-right: 2rpx solid #797979;
			}
			
			&-confirm {
				font-size: 28rpx;
				flex: 1;
				color: #797979;
				border-top: 2rpx solid #797979;
			}
		}
	}
}
</style>